<template>
	<view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{i18n.finance.findorder}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-form-group" >
					<view class="title">{{i18n.finance.order_sn}}</view>
					<input class="text" :placeholder="i18n.finance.inputorder_sn" v-model="order_sn"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-purple text-purple" @tap="hideModal">{{i18n.popup.cancel}}</button>
						<button class="cu-btn bg-yellow margin-left" @tap="findorder">{{i18n.popup.confirm}}</button>
		
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750upx; top: 0;left: 0;  ">

			<view class="time">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
							{{i18n.finance.Profittype}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="selector" :value="rank" :range="rankArr" @change="rankChange">
								<view class="picker"> {{rank === '' ? this.i18n.finance.all : rankArr[rank]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- <view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
							{{i18n.finance.order_sn}}
						</view>
						 <view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
						 	 <input type="text" :value="i18n.finance.find" disabled="true" @tap="showModal('DialogModal1')"/>
						 </view>
					</view>
				</view> -->
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
								{{i18n.finance.type}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="selector" :value="simrank" :range="simArr" @change="simrankChange">
								<view class="picker"> {{simrank === '' ? this.i18n.finance.all : simArr[simrank]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="time">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
							{{i18n.finance.start}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange1">
								<view class="picker">{{date === '' ? this.i18n.finance.all : date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left" style="padding: 10px;float: left;line-height: 40px;">
								{{i18n.finance.end}}
						</view>
						<view class="uni-list-cell-db" style="padding: 10px;line-height: 40px;">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange2">
								<view class="picker"> {{date2 === '' ? this.i18n.finance.all : date2}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="flex  bg-black  ">
			<view class="flex-twice padding-sm radius ">
				<view class=" text-right">
					<text style="float: left;">{{i18n.finance.bentotal}}：</text>
					<text style="margin-right: 25px;">{{sum2}}</text>
				</view>
			</view>
			<view class="flex-twice padding-sm radius ">
				<view class=" text-right">
					<text style="float: left;">{{i18n.finance.profittotal}}：</text>
					<text style="margin-right: 25px;">{{sum}}</text>
				</view>
			</view>
		</view>

		<!-- 内容部分 -->
		<scroll-view class="panel-scroll-box" scroll-y="true" @scrolltolower="loadMore">
			<!-- 委托列表 -->
			<view class="flex margin-xs radius bg-black margin-top" v-for="(item, index) in tabItem.newsList" :key="index">
				
				<view class="flex-twice   padding-sm radius ">
					<view>
						<view @tap="copy(item.order_sn)">{{i18n.finance.order_sn}}: {{item.order_sn}}  </view>
						<text>{{item.product_id}} </text>
						<text style="margin-left: 10px;color: #969696;"> {{item.addtime_text}}</text>
						<text style="float: right;">{{item.sec}}S</text>
					</view>
				
					<view class="flex">
						<view class="flex-sub   ">
							<view class="toptext  ">
				
								<view>{{i18n.order.direction}}</view>
								<text :class="item.rise_fall == '1' ? ' uni-up' : ' uni-down' ">{{i18n.order[item.rise_fall_text]}}</text>
							</view>
						</view>
						<view class="flex-sub   ">
							<view class="toptext  ">
				
								<view>{{i18n.order.BuyingPrice}}</view>
								<text>{{item.price}}</text>
							</view>
						</view>
						<view class="flex-sub  ">
							<view class="toptext  ">
				
								<view>{{i18n.order.settlementPrice}}</view>
								<text :class="item.rise_fall == '1' ? ' uni-up' : ' uni-down' ">{{item.sell_price}}</text>
							</view>
						</view>
						<view class="flex-sub  ">
							<view class="toptext  ">
				
								<view>{{i18n.order.money}}</view>
								<text>{{item.hand}}</text>
							</view>
						</view>
						<view class="flex-sub ">
							<view class="toptext  ">
				
								<view>{{i18n.order.Rate}}</view>
								<text :class="item.profit >0 ? ' uni-up' : ' uni-down' ">{{item.profit > 0 ? "+" : ""}}{{item.profit}}</text>
							</view>
						</view>
				
				
					</view>
					<view class="cu-progress round margin-top xs" v-if="item.order_state=='1'">
						<view :class="item.sim==1 ? 'bg-gradual-orange':'bg-gradual-pink'" :style="[{ width:item.per+'%'}]"></view>
					</view>
				
				
				</view>
				 
			</view>
				
			<!-- 上滑加载更多组件 -->
			<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
		</scroll-view>
 

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import countdownTime from '@/components/countdown-timer.vue'
	import qiOrderList from '@/components/qiOrderList.vue'
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;

	export default {

		components: {
			// mixPulldownRefresh,
			mixLoadMore,
			countdownTime,
			qiOrderList,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				token: '',
				url: '',
				qwe: true,
				asd: false,
				page: 1,
				shouyu: [],
				danwei: [],
				chuyu: [],
				page2: 2,
				date: '',
				date2: '',
				start: '',
				end: '',
				rank: '',
				rank2: '',
				simrank: '',
				// rankArr: ['盈利', '亏损'],
				// rankArr2: [],
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引
				tabItem: {
					name: 'order',
					ptype: 'wall1',
					newsList: [],
					loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
					refreshing: 0,
					page: 1,
				},
				sum:0,  //盈利
				sum2:0, //本金
				modalName: null,
				order_sn:'',
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			rankArr2() {
				let arr = [];
				for (let key in this.myconfig.caiwutype) {
					// arr.push(this.myconfig.caiwutype[key])
					arr.push({name:this.myconfig.caiwutype[key],'id':key})
					
				}

				return arr
			},
			rankArr(){
				return [this.i18n.finance.profit, this.i18n.finance.loss];
			},
			simArr(){
				return [this.i18n.index.room2, this.i18n.index.room1];
			}
		},

		onLoad() {
			// console.log(this.rankArr2)
			// this.tabItem.ptype = data.index ? data.index : 'wall1'
			uni.setNavigationBarTitle({
				title: this.i18n.qorder.title
			});
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadNewsList('add');
		},
		methods: {
			showModal(name) {
				this.modalName = name
			},
			hideModal(e) {
				this.modalName = null
			},
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//列表
			loadNewsList(type) {
				let tabItem = this.tabItem;
				console.log(type)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					tabItem.page = 1;
				}
				// 请求数据
				let send = {
					// ptype: tabItem.ptype,
					type: '',
					page: tabItem.page,
				};
				if (this.rank2 !== '') {
					send.type = this.rankArr2[this.rank2].id;
				}
				if (this.rank !== '') {
					send.rank = this.rank;
				}
				if (this.simrank !== '') {
					send.sim = this.simrank+1;
				}
				if (this.date !== '') {
					send.start = this.date;
				}
				if (this.date2 !== '') {
					send.end = this.date2;
				}
				if (this.order_sn !== '') {
					send.order_sn = this.order_sn;
				}

				this.$http.post('Qi.history', send).then(res => {
					let list = res.data.list;
					this.sum=res.data.sum;
					this.sum2=res.data.sum2;
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
					list.data.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						tabItem.newsList.push(item);
					})

					tabItem.loadMoreStatus = list.current_page >= list.last_page ? 2 : 0;
					tabItem.page += 1;
				})

			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange1: function(e) {
				this.date = e.target.value
				console.log(e.target.value)
				this.start = e.target.value
				// this.loadNewsList('refresh')

			},
			bindDateChange2: function(e) {
				this.date2 = e.target.value
				console.log(e.target.value)
				this.end = e.target.value
				this.loadNewsList('refresh')

			},
			rankChange: function(e) {
				this.rank = e.target.value;
				this.loadNewsList('refresh')
			},
			rankChange2: function(e) {
				this.rank2 = e.target.value;
				this.loadNewsList('refresh')
			},
			simrankChange: function(e) {
				this.simrank = e.target.value;
				this.loadNewsList('refresh')
			},
			findorder(){ 
				this.loadNewsList('refresh')
				this.hideModal();
			},
			copyTitle(txt) {
			   var input = document.createElement("input"); // 创建一个新input标签
			    input.setAttribute("readonly", "readonly"); // 设置input标签只读属性
			    input.setAttribute("value", txt); // 设置input value值为需要复制的内容
			    document.body.appendChild(input); // 添加input标签到页面
			    input.select(); // 选中input内容
			    input.setSelectionRange(0, 9999); // 设置选中input内容范围
			    document.execCommand("copy"); // 复制
			    document.body.removeChild(input);  // 删除新创建的input标签
			    // 只是提示作用。
			    this.$api.msg('复制成功')
			},
			copy(text) {
				// #ifdef H5
				console.log('h5-copy')
				this.copyTitle(text);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('success');
						this.$api.msg('复制成功')
					}
				});
				// #endif
				
			},
			// tabSelect(e) {
			// 	this.tabCurrentIndex = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// }
		}
	}
</script>

<style scoped>
	.cu-item .text-gray {
		width: 45px;
		display: inline-block;
	}

	.row {
		display: inline;
	}

	.bai {
		padding: 6px 12px;
		border-radius: 8px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid.no-border {
		padding: 3px 17px;
	}

	.nav .cu-item {
		border: none;
	}

	.nav .cu-item.cur {
		border-bottom: 1px solid;
	}

	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 800px;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.time {
		display: flex;
		justify-content: space-around;
		/* border-bottom: 20upx solid #f1f1f1; */
	}

	.time .uni-list {
		width: 50%;
		text-align: center;
		background: #0E1325;
	}
	.toptext {
		font-size: 12px;
		text-align: center;
		color: #e3e3e3;
		font-weight: 100;
	}
</style>
